import React from 'react';
import {TimePicker,Select,Button, Input, Spin, DatePicker,Icon,TreeSelect,Modal,message} from 'antd';
import styles from './AddItem.less';
import {VtxModalList, VtxModal, VtxDatePicker} from 'vtx-ui';
import {NAME_SPACE, AddForm} from './config'
import moment from 'moment'

const Option = Select.Option;
const { confirm } = Modal;

class Index extends React.Component{
  constructor(props){
    super(props)
    this.hideHandle = this.hideHandle.bind(this)
    this.submitHandle = this.submitHandle.bind(this)
    this.valueChange = this.valueChange.bind(this)
  };
  hideHandle(){
    const {dispatch} = this.props 
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        addModelVisable: false,
      }
    })
  };
  submitHandle(){
    const {dispatch, modifyId, addForm} = this.props;
    this.lis.submit().then(res => {
        if (res) {
            if (modifyId) {
              confirm({
                title: '设置是否立即生效？',
                okText: '立即生效',
                cancelText: '次日凌晨生效',
                onOk() {
                  dispatch({
                    type: `${NAME_SPACE}/_modify`
                  })
                },
                onCancel() {
                  dispatch({
                    type: `${NAME_SPACE}/_modify`
                  })
                },
              });
            } else {
                dispatch({
                    type: `${NAME_SPACE}/add`
                })
            }
        }
    });
  };
  valueChange(name, value){
    const {dispatch} = this.props
    // console.log(value)
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'addForm',
        data: {
          [name]: value
        }
      }
    })
  };
  render(){ 
    const {dispatch, addModelVisable, addForm,} = this.props

    const {
      // 购置时间
      buyDate,
      // 品牌 
      carBrand,
      // 车牌号
      carNum,
      // 设备号
      sbNum,
    } = addForm

    const modalProps = {
      footer: [
        <Button key="back" onClick={this.hideHandle}>取消</Button>,
        <Button key="ok" type="primary" onClick={this.submitHandle}>确定</Button>,
      ],
      onCancel: this.hideHandle,
      onOk: this.submitHandle,
      maskClosable: false,
      title: '新增',
      visible: addModelVisable,
      width: 600,
    }
    return(
      <div>
        <VtxModal {...modalProps}>
          <div>
            <VtxModalList
              ref={(lis) => {this.lis = lis}}
              visible={addModelVisable}
              isRequired={true}
            >
              <Select
                value = {carNum}
                onChange={(value) =>{
                    this.valueChange("carNum", value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '车牌号',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: carNum,
                  }
                }}
              >
                
              </Select>
              <Input
                value = {carBrand}
                onChange={(e) =>{
                    this.valueChange("carBrand", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '车辆品牌',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: carBrand,
                  }
                }}
              />
              <DatePicker
                value={buyDate}
                onChange={(data, dateString) => {this.valueChange('buyDate', moment(dateString))}}
                format={"YYYY-MM-DD"}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '购置日期',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: buyDate,
                  }
                }}
              />
              {/* <Input
                value = {code}
                onChange={(e) =>{
                    this.valueChange("code", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '作业人员绑定',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: code,
                  }
                }}
              /> */}
            </VtxModalList>
          </div>
        </VtxModal>
      </div>
    )
  }
}
export default Index